<script setup lang="ts">
import type { CSSProperties } from 'vue';
import { h, ref } from 'vue';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
  {
    key: 'mail',
    icon: () => h(MailOutlined),
    label: 'Navigation One',
    title: 'Navigation One',
  },
  {
    key: 'app',
    icon: () => h(AppstoreOutlined),
    label: 'Navigation Two',
    title: 'Navigation Two',
  },
  {
    key: 'sub1',
    icon: () => h(SettingOutlined),
    label: 'Navigation Three - Submenu',
    title: 'Navigation Three - Submenu',
    children: [
      {
        type: 'group',
        label: 'Item 1',
        children: [
          {
            label: 'Option 1',
            key: 'setting:1',
          },
          {
            label: 'Option 2',
            key: 'setting:2',
          },
        ],
      },
      {
        type: 'group',
        label: 'Item 2',
        children: [
          {
            label: 'Option 3',
            key: 'setting:3',
          },
          {
            label: 'Option 4',
            key: 'setting:4',
          },
        ],
      },
    ],
  },
  {
    key: 'alipay',
    label: h('a', { href: 'https://antdv.com', target: '_blank' }, 'Navigation Four - Link'),
    title: 'Navigation Four - Link',
  },
  {
    key: 'alipay',
    label: h('a', { href: 'https://antdv.com', target: '_blank' }, 'Navigation Four - Link'),
    title: 'Navigation Four - Link',
  },
  {
    key: 'alipay',
    label: h('a', { href: 'https://antdv.com', target: '_blank' }, 'Navigation Four - Link'),
    title: 'Navigation Four - Link',
  },
  {
    key: 'alipay',
    label: h('a', { href: 'https://antdv.com', target: '_blank' }, 'Navigation Four - Link'),
    title: 'Navigation Four - Link',
  },
  {
    key: 'alipay',
    label: h('a', { href: 'https://antdv.com', target: '_blank' }, 'Navigation Four - Link'),
    title: 'Navigation Four - Link',
  },

]);
const headerStyle: CSSProperties = {
  position: 'fixed',
  top: 0,
  width: '100%',
  // textAlign: 'center',
  color: '#fff',
  paddingInline: 30,
  backgroundColor: '#fcfcfc',
  zIndex: 1000,
};
const contentStyle: CSSProperties = {
  marginTop: '64px',
  textAlign: 'center',
  minHeight: 120,
  lineHeight: '120px',
  color: '#fff',
  // backgroundColor: '#108ee9',
};
</script>

<template>
  <div class='header'>
    <a-space direction="vertical" :style="{ width: '100%' }" :size="[0, 38]">
      <a-layout>
        <a-layout-header :style="headerStyle">
<!--          <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" />-->
          <nav style=''>
            <a>你好</a>
            <a>模块</a>
            <a>二年</a>
            <a>千问</a>
            <a>你们</a>
            <a>是的</a>
            <a>法国</a>
            <a>法国</a>
            <a>法国</a>
          </nav>
        </a-layout-header>
        <a-layout-content :style="contentStyle">
          <RouterView/>
        </a-layout-content>
      </a-layout>
    </a-space>
  </div>

</template>

<style lang="less">
.header{
  width: 100%;
  //background-color: #9feaf9;
  //height: 40px;
}
</style>
